<!-- 训练配置 -->
<script setup lang="ts">
import type { EditInfrenceBasicInfo } from "@/common/apis/train/type"
import type { FormRules } from "element-plus"
import { FormTypeEnum } from "@/common/constants/other-keys"
import miandMap from './mindMap.vue'

interface Props {
  dialogType: FormTypeEnum
  ruleForm: EditInfrenceBasicInfo
  isEdit?: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(["update:ruleForm"])

const ruleFormRef = ref()

const rules = reactive<FormRules>({
  "inference_config.task_config.resources.cpu_num": [
    { required: true, message: "请输入CPU数量", trigger: "change" },
    { required: true, message: "请输入CPU数量", trigger: "blur" }
  ],
  "inference_config.task_config.resources.gpu_num": [
    { required: true, message: "请输入GPU数量", trigger: "change" },
    { required: true, message: "请输入GPU数量", trigger: "blur" }
  ],
  "inference_config.task_config.resources.worker_num": [
    { required: true, message: "请输入节点数量", trigger: "change" },
    { required: true, message: "请输入节点数量", trigger: "blur" }
  ],
  "inference_config.episode_config.max_episode": [
    { required: true, message: "请输入最大局数", trigger: "change" },
    { required: true, message: "请输入最大局数", trigger: "blur" }
  ]
})


const localRuleForm = computed({
  get: () => props.ruleForm,
  set: (newValue) => {
    emit("update:ruleForm", newValue)
  }
})
const ruleFormUpdate = (val: any) => {
  localRuleForm.value.inference_config.end_condition_config = val
}

// 确保inference_config.end_condition_config始终为数组
const ensureEndConditionConfigIsArray = computed(() => {
  if (!localRuleForm.value.inference_config.end_condition_config) {
    localRuleForm.value.inference_config.end_condition_config = []
  }
  return localRuleForm.value.inference_config.end_condition_config
})

// 暴露验证方法给父组件
defineExpose({
  validate: async () => {
    if (!ruleFormRef.value) return true
    try {
      await ruleFormRef.value.validate()
      return true
    } catch (error) {
      return false
    }
  }
})
</script>

<template>
  <div class="steps-wrapper">
    <el-form ref="ruleFormRef" label-width="130px" :model="localRuleForm" status-icon :rules="rules"
      label-position="right" class="fixed-width">
      <div class="cpi-header-title">
        <SvgIcon name="info-title" />
        <span class="cpi-header-text">推演配置</span>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />资源配置
      </div>
      <div v-if="isEdit || dialogType == FormTypeEnum.CREATE">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="CPU数量" prop="inference_config.task_config.resources.cpu_num">
              <el-input-number v-model.number="localRuleForm.inference_config.task_config.resources.cpu_num" :min="1"
                :step="1" clearable step-strictly :controls="false" />
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="GPU数量" prop="inference_config.task_config.resources.gpu_num">
              <el-input-number v-model.number="localRuleForm.inference_config.task_config.resources.gpu_num" :min="1"
                :step="1" clearable step-strictly :controls="false" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="节点数量" prop="inference_config.task_config.resources.worker_num">
              <el-input-number v-model.number="localRuleForm.inference_config.task_config.resources.worker_num" :min="1"
                :step="1" clearable step-strictly :controls="false" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启分布式" prop="train_config.task_config.resources">
              <el-switch v-model="localRuleForm.inference_config.task_config.resources.distributed_enable" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="CPU数量：">
              {{ localRuleForm.inference_config.task_config.resources.cpu_num }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="GPU数量：">
              {{ localRuleForm.inference_config.task_config.resources.gpu_num }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="节点数量：">
              {{ localRuleForm.inference_config.task_config.resources.worker_num }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启分布式：">
              {{ localRuleForm.inference_config.task_config.resources.distributed_enable ? "是" : "否" }}
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />局数配置
      </div>
      <div class="train-setting-item" v-if="isEdit || dialogType == FormTypeEnum.CREATE">
        <el-form-item label="" prop="inference_config.episode_config.max_episode">
          <template #label>
            最大局数
            <el-tooltip content="最大局数为1-1000000" placement="right">
              <SvgIcon name="info" class="svg-icon" />
            </el-tooltip>
          </template>
          <el-input-number v-model.number="localRuleForm.inference_config.episode_config.max_episode" :min="1"
            :max="1000000" :step="1" clearable step-strictly :controls="false" />
        </el-form-item>
      </div>
      <div class="train-setting-item" v-else>
        <el-form-item label="">
          <template #label>
            最大局数
            <el-tooltip content="最大局数为1-1000000" placement="right">
              <SvgIcon name="info" class="svg-icon" />
            </el-tooltip>
          </template>
          {{ localRuleForm.inference_config.episode_config.max_episode }}
        </el-form-item>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />终止条件配置
      </div>
      <div class="train-setting-item train-setting-item-border" style="width: 100%;height: 100%;bor">
        <miandMap :isEdit="(isEdit || dialogType == FormTypeEnum.CREATE)" @update:ruleForm="ruleFormUpdate"
          :ruleForm="localRuleForm" />
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.steps-wrapper {
  margin: 20px 0;
  padding: 20px;
  width: 100%;
  height: auto;
  background: #031527;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}

.train-setting-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 10px;
}

.train-setting-item-border {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .1)
}

.el-form-item {
  margin-right: 35px;
}

.engine-config-title {
  margin-bottom: 10px;
}

.engine-config-icon {
  margin-right: 10px;
}

.cpi-header-title {
  margin-bottom: 20px;
}

.cpi-header-text {
  margin-left: 6px;
}
</style>
